let form = layui.form;
// 全局变量，获取文章列表数据的请求参数
let data = {
    pagenum: 1,   // 页码值，表示获取第几页的数据
    pagesize: 2,  // 每页显示多少条
    // cate_id: ?,
    // state: ?
}

// ------------------------  获取文章列表，渲染 ----------------------
function renderArticle() {
    $.ajax({
        url: '/my/article/list',
        data: data,
        success: function (res) {
            // console.log(res)
            let htmlStr = template('tpl-list', res);
            $('tbody').html(htmlStr);
            // 这里可以获取总数 res.total
            showPage(res.total);
        }
    });
}

renderArticle();



// 了解分页插件（layui提供的模块 - laypage）
let laypage = layui.laypage;
function showPage(t) {
    //执行一个laypage实例
    laypage.render({
        elem: 'page', // 注意，这里的 test1 是 ID，不用加 # 号
        count: t, // 数据总数，从服务端得到
        limit: data.pagesize, // 每页显示多少条
        limits: [2, 3, 5, 10], // 下拉框中的值，表示每页显示多少条，可以自己选择
        curr: data.pagenum, // 当前显示的页码
        groups: 5, // 连续出现的页码个数
        // prev: '上一篇',
        // first: '首页'
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
        // 切换分页时的回调。
        // jump函数，在 laypage.render 调用时就会触发一次，此时first===true
        // jump函数，在点击页码的时候，也会触发，此时 first===undefined
        jump: function (obj, first) {
            // obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); // 得到每页显示的条数

              // console.log(first); // 第一次调用 laypage.render 方法，first===true；切换页码之后，first===undefined
            // 首次不执行
            if (!first) {
                //do something
                // 修改Ajax请求的pagenum
                data.pagenum = obj.curr; // obj.curr 表示我们点击的是几，赋值给pagenum.最后调用renderArticle重新获取数据并渲染
                data.pagesize = obj.limit;
                renderArticle();
            }
        }
    });
}



// -----------------------  发送ajax请求，获取分类 ------------------
$.ajax({
    url: '/my/article/cates',
    success: function (res) {
        if (res.status === 0) {
            let htmlStr = template('tpl-category', res);
            $('select[name=category]').append(htmlStr);
            // 更换下拉框的渲染
            form.render('select');
        }
    }
});

// ------------------------  完成筛选 ----------------------------
$('#search').on('submit', function (e) {
    e.preventDefault();
    // 获取两个下拉框里面的值
    let cate_id = $('select[name=category]').val();
    let state = $('select[name=state]').val();
    // console.log(cate_id)
    // console.log(state)
    // 改变ajax请求参数
    data.cate_id = cate_id;
    data.state = state;
    // 重置页码为1
    data.pagenum = 1;
    // 重新发送请求获取数据，并渲染
    renderArticle();
})